//项目的根组件

import React from 'react'

//导入路由组件
import {HashRouter,Route,Link} from 'react-router-dom'
import HomeContainer from './comonents/home/HomeContainer.jsx'
import MovieContainer from './comonents/movie/MovieContainer.jsx'
import AboutContainer from './comonents/about/AboutContainer.jsx'


//导入antd的布局组件
import { Layout, Menu } from 'antd';

const { Header, Content, Footer } = Layout;

import styles from './css/app.scss'




export default class App extends React.Component{
  constructor(props){
    super(props)
    this.state = {

    }
  }
  componentWillMount(){
    //console.log(window.location.hash.split('/')[1]); //解决刷新页面，当前选项不对应的问题
    
  }
  render(){
    return <HashRouter>
            <Layout style={{height:'100%'}}>
              <Header style={{ position: 'fixed', zIndex: 1, width: '100%' }}>
                <div className={styles.logo} />
                <Menu
                  theme="dark"
                  mode="horizontal"
                  defaultSelectedKeys={[window.location.hash.split('/')[1]]}
                  style={{ lineHeight: '64px' }}
                >
                  <Menu.Item key="home">
                    <Link to="/home">首页</Link>
                  </Menu.Item>
                  <Menu.Item key="movie">
                    <Link to="/movie/in_theaters/1">电影</Link>
                  </Menu.Item>
                  <Menu.Item key="about">
                    <Link to="/about">关于</Link>
                  </Menu.Item>
                </Menu>
              </Header>
              <Content style={{marginTop: 64,backgroundColor:'#fff',flex:1}}>
                <Route path="/home" component={HomeContainer}></Route>
                <Route path="/movie"  component={MovieContainer}></Route>
                <Route path="/about" component={AboutContainer}></Route>
              </Content>
              <Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED, React 学习</Footer>
            </Layout>
    </HashRouter>
  }


}